<template>
  <div class="back-box">
    <div class="sidebar">
      <el-menu :default-active="$route.name" class="left-menu-box" :collapse="isCollapse"
               background-color="#324157"
               text-color="#ffffff"
               @select="handleSelect"
               router>
  <!--      <el-submenu index="1">-->
  <!--        <template slot="title">-->
  <!--          <i class="el-icon-location"></i>-->
  <!--          <span slot="title">导航一</span>-->
  <!--        </template>-->
  <!--        <el-menu-item-group>-->
  <!--          <span slot="title">分组一</span>-->
  <!--          <el-menu-item index="1-1">选项1</el-menu-item>-->
  <!--          <el-menu-item index="1-2">选项2</el-menu-item>-->
  <!--        </el-menu-item-group>-->
  <!--        <el-menu-item-group title="分组2">-->
  <!--          <el-menu-item index="1-3">选项3</el-menu-item>-->
  <!--        </el-menu-item-group>-->
  <!--        <el-submenu index="1-4">-->
  <!--          <span slot="title">选项4</span>-->
  <!--          <el-menu-item index="1-4-1">选项1</el-menu-item>-->
  <!--        </el-submenu>-->
  <!--      </el-submenu>-->
        <el-menu-item @click="menu_trigger()">
          <template v-if="isCollapse">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">展开</span>
          </template>
          <template v-else>
            <i class="el-icon-arrow-left"></i>
            <span slot="title">收起</span>
          </template>
<!--          <span slot="title">后台管理</span>-->
        </el-menu-item>

        <template v-for="item in items">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu
                    v-if="subItem.subs"
                    :index="subItem.index"
                    :key="subItem.index"
                >
                  <template #title>{{ subItem.title }}</template>
                  <el-menu-item
                      v-for="(threeItem, i) in subItem.subs"
                      :key="i"
                      :index="threeItem.index"
                  >{{ threeItem.title }}</el-menu-item>
                </el-submenu>
                <el-menu-item
                    v-else
                    :index="subItem.index"
                    :key="subItem.index"
                >{{ subItem.title }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
    <div class="back-stage-content-box" :class="{'back-stage-content-box-collapse': isCollapse}">
      <TagsBar></TagsBar>
      <div class="back-stage-content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>
import TagsBar from "@/pages/backstagepages/TagsBar";

export default {
  name: "BackStage",
  components: {
    TagsBar,
  },
  data() {
    return {
      isCollapse: true,
      items: [
        {
          icon: "el-icon-collection",
          index: "article-manager",
          title: "文章管理"
        },
        {
          icon: "el-icon-collection-tag",
          index: "tag-manager",
          title: "标签管理"
        },
      ]
    };
  },
  computed: {
    tagsList(){
      return this.$route.state.tagsList.map(item => item.name)
    }
  },
  methods:{
    menu_trigger(){
      this.isCollapse = !this.isCollapse;
    },
    handleSelect(index){

    }
  },
}
</script>

<style scoped>
  .back-box {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
  }
  .sidebar{
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
  }
  .sidebar::-webkit-scrollbar {
    width: 0;
  }
  .left-menu-box{
    height: 100%;
  }
  .left-menu-box:not(.el-menu--collapse) {
    width: 200px;
  }

  .back-stage-content-box{
    position: absolute;
    top: 60px;
    left: 200px;
    right: 0;
    bottom: 0;
    padding-bottom: 30px;
    /*background-color: #00BB33;*/
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
  }
  .back-stage-content-box-collapse{
    left: 65px;
  }
  .back-stage-content {
    padding: 10px;
    overflow-y: scroll;
    width: auto;
    height: 100%;
    /*height: calc(100% - 60px);*/
    box-sizing: border-box;
  }
</style>
